<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册网易免费邮箱-中国大一大电子邮件服务商</title>
<link rel="shortcut icon"  href="images/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/01.css">
</head>

<body>
<header class="header">
  <div class="bg"></div>
  <div class="links"> <a href="#">了解更多|</a> <a href="#">反馈意见</a> </div>
</header>
<section class="content">
  <header>
    <h1 class="content-tit"> 欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品 </h1>
  </header>
  <div class="main-wrapper">
  	<div class="mainBody">
      <div class="regTabs">
        <ul>
          <li><a href="#" style="color:#fff">注册字母邮箱</a></li>
          <li><a href="#">注册手机号码邮箱</a></li>
          <li><a href="#">注册VIP邮箱</a></li>
        </ul>
      </div>
      
      <div class="regForm">
        <dl class="regForm-item">
          <dt class="regForm-title"> <span class="txt-imp">*</span> 邮件地址 </dt>
          <dd class="regForm-ct">
            <input type="text"  class="ipt">
            <strong style="font-weight:bold;font-size:14px;">@</strong>
            <select>
              <option selected="selected">163.com</option>
              <option selected="selected">163.cn</option>
            </select>
            <div class="tip"> <span>6~18个字符，可使用字母、数字、下划线，需以字母开头</span> </div>
          </dd>
        </dl>
        <dl class="regForm-item">
          <dt class="regForm-title"> <span class="txt-imp">*</span>密码 </dt>
          <dd class="regForm-ct">
            <input type="text" class="ipt" style="width:322px;">
            <div class="tip"> <span>6~16个字符，区分大小写</span> </div>
          </dd>
        </dl>
        <dl class="regForm-item">
          <dt class="regForm-title"> <span class="txt-imp">*</span>确认密码 </dt>
          <dd class="regForm-ct">
            <input type="text" class="ipt" style="width:322px;">
            <div class="tip"> <span>请再次填写密码</span> </div>
          </dd>
        </dl>
        <dl class="regForm-item">
          <dt class="regForm-title"> <span class="txt-imp">*</span>手机号码 </dt>
          <dd class="regForm-ct">
            <input type="text" class="ipt" style="width:322px;">
            <div class="itl" style="width:35px;height:27px;line-height:27px;">
              <div class="flag flag-CN"> <em>&nbsp;</em> </div>
            </div>
            <div class="select_panel"> <a href="#" class="flag-CN"> <em></em> 中国+86 </a> </div>
            <div class="tip"> <span>忘记密码时，可以通过该手机号码快速找回密码</span> </div>
          </dd>
        </dl>
      </div>
      <div class="regForm">
        <dl class="regForm-item">
          <dt class="regForm-title"> <span class="txt-imp">*</span>验证码 </dt>
          <dd class="regForm-ct">
            <input type="text" value=""  class="ipt">
            <div class="tip"> <span>请填写图片中的字符，不区分大小写</span> </div>
          </dd>
          <button>免费获取验证码</button>
        </dl>
      </div>
      <div class="regForm">
        <dl class="regForm-item">
          <dt class="regForm-title"> <span class="txt-imp">*</span>短信验证码 </dt>
          <dd class="regForm-ct">
            <input type="text" value="" class="ipt"  style="width: 322px;">
            <div class="tip"> <span>请查收手机短信，并填写短信中的验证码</span> </div>
          </dd>
        </dl>
      </div>
      <div class="tipt">
      	<input id="mainAcceptIpt" type="checkbox" checked="checked" tabindex="-1"><span>同意<a href="#">服务条款</a>和<a href="#">隐私权相关政策</a></span>
      </div>
      <button>立即注册</button>
     </div>
  </div>
  <div class="mainBody-side"> <img src="images/reg_master.gif" / > </div>
</section>

<script type="text/javascript">
	function select_panel(){
		var links=document.querySelectorAll(".select_panel a");
		
		for(i=0;i<links.length;i++){
			links[i].addEventListener("click", function(e){
				var a= e.target;
				var txt=a.innerText;
				var cls=a.className;
				
				var area=  txt.substr(txt.indexOf("+"),txt.length-txt.indexOf("+"));
				document.querySelector('#phone').setAttribute('value',area);


					var p=document.querySelector('.flag');
					p.className="flag "+cls;
			})
		}
	}

function switchFlag(){
	var div=document.querySelector(".flag");
	var panel=document.querySelector(".select_panel");
	div.addEventListener("click",function(e){
		
		if(panel.style.display==="none"){
			panel.style.display="block";
			}else{
				panel.style.display="none";
			}
		})
}
	function switchTab(){
		var tabs=document.querySelectorAll(".regTabs ul li a");
		var ul=document.querySelector(".regTabs ul");
		
		for(i=0;i<tabs.length;i++){
			tabs[i].index=i;
			tabs[i].addEventListener("click",function(e){
				var a=e.target;
				ul.style.background= "url(assets/images/tab.jpg) 0 -"+ item.index*56+"px";
				});
			}
		}
</script>
</section>
</body>
</html>
